piratezon_new/app/pages/site-manager/challenge/detail/[id].vue

<template>
  <div class="admin--page-content">
    <div v-if="isLoading" class="admin--table-loading" style="padding:60px;text-align:center;">
      데이터를 불러오는 중...
    </div>

    <div v-else-if="!challenge" class="admin--table-empty" style="padding:60px;text-align:center;">
      해당 챌린지를 찾을 수 없습니다.
      <div class="mt--16">
        <button class="admin--btn" @click="goToList">← 목록으로</button>
      </div>
    </div>

    <template v-else>
      <!-- ============================
           메인 탭
      ============================ -->
      <div class="admin--main-tabs">
        <button
          type="button"
          :class="{ 'is-active': activeMainTab === 'challenge' }"
          @click="activeMainTab = 'challenge'"
        >
          챌린지관리
        </button>
        <button
          type="button"
          :class="{ 'is-active': activeMainTab === 'applicants' }"
          @click="activeMainTab = 'applicants'"
        >
          신청자관리
        </button>
        <button
          type="button"
          :class="{ 'is-active': activeMainTab === 'participants' }"
          @click="activeMainTab = 'participants'"
        >
          참가자관리
        </button>
      </div>

      <!-- ============================
           신청자관리 (준비중)
      ============================ -->
      <div v-if="activeMainTab === 'applicants'" class="admin--placeholder">
        <p>📝 신청자관리는 준비중입니다.</p>
      </div>

      <!-- ============================
           참가자관리 (준비중)
      ============================ -->
      <div v-else-if="activeMainTab === 'participants'" class="admin--placeholder">
        <p>👥 참가자관리는 준비중입니다.</p>
      </div>

      <!-- ============================
           챌린지관리 (기본 활성)
      ============================ -->
      <div v-show="activeMainTab === 'challenge'" class="admin--form">
        <table class="admin--form--table">
          <colgroup>
            <col style="width: 140px;">
            <col>
          </colgroup>
          <tbody>
            <tr>
              <th><div>챌린지명</div></th>
              <td>{{ challenge.name }}</td>
            </tr>
            <tr>
              <th><div>참가비</div></th>
              <td>{{ formatFee(challenge.fee) }}</td>
            </tr>
            <tr>
              <th><div>기간</div></th>
              <td>{{ formatDate(challenge.start_date) }} ~ {{ formatDate(challenge.end_date) }}</td>
            </tr>
            <tr>
              <th><div>최대 참가자</div></th>
              <td>{{ challenge.max_participants }}명</td>
            </tr>
            <tr>
              <th><div>총 라운드</div></th>
              <td>{{ challenge.total_rounds }}R</td>
            </tr>
            <tr>
              <th><div>타이틀 이미지</div></th>
              <td>
                <div v-if="challenge.file_path" class="onboard--photo-grid">
                  <div class="onboard--photo-item">
                    <img :src="getImageUrl(challenge.file_path)" :alt="challenge.file_name || challenge.name" />
                  </div>
                </div>
                <template v-else>-</template>
              </td>
            </tr>
            <tr>
              <th><div>현재 상태</div></th>
              <td>
                <span :class="['admin--badge', statusBadgeClass(challenge.derived_status)]">
                  {{ statusLabel(challenge.derived_status) }}
                </span>
                <span v-if="challenge.closed_at" class="txt--muted ml--16">
                  ({{ formatDateTime(challenge.closed_at) }} 마감)
                </span>
              </td>
            </tr>
            <tr>
              <th><div>노출 여부</div></th>
              <td>
                <span :class="['admin--badge', challenge.status_YN === 'Y' ? 'admin--badge-active' : 'admin--badge-ended']">
                  {{ challenge.status_YN === 'Y' ? '사용중' : '미사용' }}
                </span>
              </td>
            </tr>
            <tr>
              <th><div>등록일</div></th>
              <td>{{ formatDateTime(challenge.created_at) }}</td>
            </tr>
            <tr v-if="challenge.description">
              <th><div>상세내용</div></th>
              <td>
                <div class="admin--detail--content" v-html="challenge.description"></div>
              </td>
            </tr>
          </tbody>
        </table>

        <!-- ============================
             라운드 정보 (탭)
        ============================ -->
        <h3 class="admin--table--middle--title mb--8">라운드 정보</h3>

        <div class="admin--round--tabs">
          <button
            v-for="(round, rIdx) in challenge.rounds"
            :key="round.id"
            type="button"
            class="admin--round--tab"
            :class="{ 'is-active': activeRoundIdx === rIdx }"
            @click="activeRoundIdx = rIdx"
          >
            라운드 {{ round.round_no }}
            <span v-if="round.closed_at" class="admin--round--tab__badge">종료</span>
          </button>
        </div>

        <div
          v-for="(round, rIdx) in challenge.rounds"
          v-show="activeRoundIdx === rIdx"
          :key="round.id"
          class="admin--round--box--wrap"
        >
          <div class="admin--round--title">
            라운드 {{ round.round_no }}
            <span>
              {{ round.place_mode === 'all' ? '전체 장소에 동일 적용' : '장소별 개별 설정' }}
              ㆍ 진출자 {{ round.qualified }}{{ rIdx === 0 ? '명' : '%' }}
            </span>
            <span v-if="round.closed_at" class="closed--txt">
              마감 ({{ formatDateTime(round.closed_at) }})
            </span>
            <button
              v-else-if="currentRoundIdx === rIdx && !challenge.closed_at"
              type="button"
              class="admin--btn-small admin--btn-red"
              @click="confirmCloseRound(round)"
            >
              라운드 마감
            </button>
          </div>

          <div class="admin--round--box">
            <!-- all 모드 -->
            <div v-if="round.place_mode === 'all'" class="mt--16">
              <p class="mb--8">배정 아이템 ({{ round.items.length }})</p>
              <ul v-if="round.items.length > 0" class="admin--item-modal__grid">
                <li v-for="it in round.items" :key="it.id" class="admin--item-modal__card">
                  <div style="padding:12px 12px 14px;">
                    <div class="admin--item-modal__thumb">
                      <img
                        v-if="it.file_path"
                        :src="getImageUrl(it.file_path)"
                        :alt="it.name"
                      />
                      <div v-else class="admin--item-modal__no-img">🎁</div>
                    </div>
                    <div class="admin--item-modal__name">{{ it.name || '?' }}</div>
                    <div class="admin--item-modal__meta">
                      <span v-if="it.type" class="admin--item-modal__type">{{ it.type == 'B' ? '뱃지' : it.type == 'P' ? '포인트' : '진출권' }}</span>
                      <span v-if="it.point !== null && it.point !== undefined" class="admin--item-modal__point">{{ it.point }}P</span>
                    </div>
                  </div>
                </li>
              </ul>
              <p v-else class="txt--muted">배정된 아이템이 없습니다.</p>
            </div>

            <!-- specific 모드 -->
            <template v-else>
              <!-- <p class="mb--8">장소 묶음 ({{ round.places.length }})</p> -->

              <div
                v-for="(place, pIdx) in round.places"
                :key="place.group_no"
                class="round--place--wrap"
                :class="{ 'mt--16': pIdx > 0 }"
              >
                <div class="admin--round--title">
                  장소 {{ pIdx + 1 }}
                  <span class="txt--muted">{{ placeCountText(place.onboards) }}</span>
                </div>

                <div class="place--select--wrap">
                  <p class="mt--8 mb--4">장소 목록</p>
                  <div class="area--group--wrap">
                    <div
                      v-for="group in chipsByArea(place)"
                      :key="group.area"
                      class="area--group"
                    >
                      <p class="area--group__name">📍 {{ group.area }}</p>
                      <div class="item--selected--wrap">
                        <div
                          v-for="chip in group.chips"
                          :key="chip.key"
                          :class="[
                            'item--selected',
                            chip.type === 'group' ? 'is-group is-clickable' : '',
                            chip.type === 'collapse' ? 'is-collapse is-clickable' : '',
                            chip.type === 'expanded' && chip.placeType === 'onboard' ? 'onboard' : '',
                            chip.type === 'single' && chip.placeType === 'onboard' ? 'onboard' : ''
                          ]"
                          @click="(chip.type === 'group' || chip.type === 'collapse') && toggleExpandedArea(place, chip.area)"
                        >
                          {{ chip.icon }} {{ chipLabelInArea(chip) }}
                        </div>
                      </div>
                    </div>
                  </div>

                  <p class="mt--16 mb--4">배정 아이템 ({{ place.items.length }})</p>
                  <ul v-if="place.items.length > 0" class="admin--item-modal__grid">
                    <li v-for="it in place.items" :key="it.id" class="admin--item-modal__card">
                      <div style="padding:12px 12px 14px;">
                        <div class="admin--item-modal__thumb">
                          <img
                            v-if="it.file_path"
                            :src="getImageUrl(it.file_path)"
                            :alt="it.name"
                          />
                          <div v-else class="admin--item-modal__no-img">🎁</div>
                        </div>
                        <div class="admin--item-modal__name">{{ it.name || '?' }}</div>
                        <div class="admin--item-modal__meta">
                          <span v-if="it.type" class="admin--item-modal__type">{{ it.type == 'B' ? '뱃지' : it.type == 'P' ? '포인트' : '진출권' }}</span>
                          <span v-if="it.point !== null && it.point !== undefined" class="admin--item-modal__point">{{ it.point }}P</span>
                        </div>
                      </div>
                    </li>
                  </ul>
                  <p v-else class="txt--muted">배정된 아이템이 없습니다.</p>
                </div>
              </div>
            </template>
          </div>
        </div>

        <!-- ============================
             액션 버튼
        ============================ -->
        <div class="admin--form-actions">
          <button type="button" class="admin--btn" @click="goToList">
            ← 목록으로
          </button>
          <button type="button" class="admin--btn admin--btn-blue ml--auto" @click="goToEdit">
            수정
          </button>
          <button type="button" class="admin--btn admin--btn-red" @click="confirmDelete">
            삭제
          </button>
        </div>

        <!-- 메시지 -->
        <div v-if="successMessage" class="admin--alert admin--alert-success">{{ successMessage }}</div>
        <div v-if="errorMessage" class="admin--alert admin--alert-error">{{ errorMessage }}</div>
      </div>
    </template>

    <!-- 삭제 확인 모달 -->
    <AdminAlertModal
      v-if="showDeleteModal"
      title="챌린지 삭제"
      :message="`'${challenge?.name}' 챌린지를 삭제하시겠습니까?\n삭제된 챌린지는 복원할 수 있습니다.`"
      type="confirm"
      @confirm="handleDelete"
      @cancel="showDeleteModal = false"
      @close="showDeleteModal = false"
    />

    <!-- 라운드 마감 확인 모달 -->
    <AdminAlertModal
      v-if="showCloseRoundModal"
      title="라운드 마감"
      :message="`라운드 ${closingRound?.round_no}을(를) 마감하시겠습니까?\n마지막 라운드일 경우 챌린지도 함께 자동 종료됩니다.`"
      type="confirm"
      @confirm="handleCloseRound"
      @cancel="() => { showCloseRoundModal = false; closingRound = null }"
      @close="() => { showCloseRoundModal = false; closingRound = null }"
    />
  </div>
</template>

<script setup>
  import { ref, computed, onMounted } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import AdminAlertModal from "~/components/admin/AdminAlertModal.vue";

  definePageMeta({
    layout: "admin",
    middleware: ["auth"],
  });

  const route = useRoute();
  const router = useRouter();
  const { get, post, del } = useApi();
  const { getImageUrl } = useImage();

  const challengeId = Number(route.params.id);

  const isLoading = ref(false);
  const challenge = ref(null);
  const successMessage = ref("");
  const errorMessage = ref("");
  const showDeleteModal = ref(false);
  const activeRoundIdx = ref(0); // 현재 선택된 라운드 탭
  const activeMainTab = ref("challenge"); // 'challenge' | 'applicants' | 'participants'
  const showCloseRoundModal = ref(false);
  const closingRound = ref(null);

  // 현재 라운드 인덱스 (closed_at NULL인 가장 작은 round_no)
  const currentRoundIdx = computed(() => {
    if (!challenge.value?.rounds?.length) return -1;
    const idx = challenge.value.rounds.findIndex((r) => !r.closed_at);
    return idx; // -1 이면 모든 라운드 마감 상태
  });

  const statusLabel = (s) =>
    s === "hidden" ? "비노출"
    : s === "recruiting" ? "모집중"
    : s === "running" ? "진행중"
    : s === "ended" ? "종료"
    : "-";
  const statusBadgeClass = (s) =>
    s === "hidden" ? "admin--badge-hidden"
    : s === "recruiting" ? "admin--badge-recruiting"
    : s === "running" ? "admin--badge-running"
    : s === "ended" ? "admin--badge-ended"
    : "";

  const formatDate = (s) => {
    if (!s) return "-";
    const d = new Date(s.replace(" ", "T"));
    if (isNaN(d.getTime())) return s;
    return d.toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" });
  };

  const formatDateTime = (s) => {
    if (!s) return "-";
    const d = new Date(s.replace(" ", "T"));
    if (isNaN(d.getTime())) return s;
    return d.toLocaleString("ko-KR", {
      year: "numeric", month: "2-digit", day: "2-digit",
      hour: "2-digit", minute: "2-digit",
    });
  };

  // 장소 묶음의 type별 카운트 텍스트 ("선상 3개ㆍ낚시터 2개" / 한쪽만 있으면 그쪽만)
  const placeCountText = (onboards) => {
    const list = onboards || [];
    const onb = list.filter((o) => o.place_type === "onboard").length;
    const fis = list.filter((o) => o.place_type === "fishing").length;
    const parts = [];
    if (onb > 0) parts.push(`선상 ${onb}개`);
    if (fis > 0) parts.push(`낚시터 ${fis}개`);
    return parts.join("ㆍ") || "장소 없음";
  };

  const formatFee = (fee) => {
    if (fee === null || fee === undefined || fee === "") return "-";
    const num = Number(String(fee).replace(/[^\d]/g, ""));
    if (isNaN(num) || num === 0) return fee + "";
    return num.toLocaleString() + "원";
  };

  // ============================
  // 그룹 칩 표시용 — 같은 지역 전체 선택이면 "○○ 전체" 묶음
  // ============================
  const placesAll = ref([]); // 모든 선상+낚시터 (area_name 포함)

  const loadPlacesAll = async () => {
    try {
      const [onboardRes, fishingRes] = await Promise.all([
        get("/onboard/list", { params: { per_page: 1000 } }),
        get("/fishing/list", { params: { per_page: 1000 } }),
      ]);
      const onboards = (onboardRes.data?.success ? (onboardRes.data.data.items || []) : [])
        .map((o) => ({ ...o, _placeType: "onboard" }));
      const fishings = (fishingRes.data?.success ? (fishingRes.data.data.items || []) : [])
        .map((f) => ({ ...f, _placeType: "fishing" }));
      placesAll.value = [...onboards, ...fishings];
    } catch (e) {
      console.error("[Detail] placesAll 로드 실패:", e);
    }
  };

  const placeKey = (p) => `${p._placeType}-${p.id}`;
  const onboardObjKey = (o) => `${o.place_type}-${o.place_id}`;

  function displayChips(place) {
    if (!place.expandedAreas) place.expandedAreas = [];
    const selectedKeys = new Set((place.onboards || []).map(onboardObjKey));
    const expandedAreas = new Set(place.expandedAreas);

    // 지역별 전체 장소 그룹화 (placesAll 기준)
    const groupedAll = new Map();
    placesAll.value.forEach((p) => {
      const area = p.area_name || "미분류";
      if (!groupedAll.has(area)) groupedAll.set(area, []);
      groupedAll.get(area).push(p);
    });

    const result = [];
    const processedKeys = new Set();

    // 1) 같은 지역의 모든 장소가 선택됐고 2개 이상이면 → 그룹 칩 (펼침 가능)
    for (const [area, places] of groupedAll.entries()) {
      if (places.length < 2) continue;
      const groupKeys = places.map(placeKey);
      const allSelected = groupKeys.every((k) => selectedKeys.has(k));
      if (!allSelected) continue;

      if (expandedAreas.has(area)) {
        // 펼친 상태 — 개별 칩들 + 접기 칩
        for (const p of places) {
          result.push({
            key: placeKey(p),
            type: "expanded",
            label: p.name,
            icon: p._placeType === "onboard" ? "🚤" : "🎣",
            placeType: p._placeType,
            area,
          });
        }
        result.push({
          key: `collapse:${area}`,
          type: "collapse",
          label: `${area} 접기`,
          icon: "↩",
          placeType: null,
          area,
        });
      } else {
        // 접힌 상태 — 그룹 칩
        result.push({
          key: `group:${area}`,
          type: "group",
          label: `${area} 전체`,
          icon: "📍",
          placeType: null,
          area,
        });
      }
      groupKeys.forEach((k) => processedKeys.add(k));
    }

    // 2) 남은 onboards는 개별 칩
    for (const o of (place.onboards || [])) {
      const key = onboardObjKey(o);
      if (processedKeys.has(key)) continue;
      result.push({
        key: `single:${key}`,
        type: "single",
        label: o.place_name || "(삭제됨)",
        icon: o.place_type === "onboard" ? "🚤" : "🎣",
        placeType: o.place_type,
      });
    }

    return result;
  }

  // 그룹/접기 칩 클릭 → 토글
  function toggleExpandedArea(place, area) {
    if (!place.expandedAreas) place.expandedAreas = [];
    const idx = place.expandedAreas.indexOf(area);
    if (idx === -1) place.expandedAreas.push(area);
    else place.expandedAreas.splice(idx, 1);
  }

  // 지역별로 묶어서 반환 — 각 지역명 헤더 + 그 안의 칩들
  function chipsByArea(place) {
    const chips = displayChips(place);
    const placeAreaMap = new Map();
    placesAll.value.forEach((p) => {
      placeAreaMap.set(placeKey(p), p.area_name || "미분류");
    });

    const groupMap = new Map(); // area => chips[]
    for (const chip of chips) {
      let area = chip.area;
      if (!area) {
        // single chip — placesAll에서 area 찾기
        if (chip.type === "single") {
          area = placeAreaMap.get(chip.key.replace(/^single:/, "")) || "미분류";
        } else if (chip.type === "expanded") {
          area = placeAreaMap.get(chip.key) || "미분류";
        }
      }
      if (!area) area = "미분류";
      if (!groupMap.has(area)) groupMap.set(area, []);
      groupMap.get(area).push(chip);
    }

    return Array.from(groupMap.entries()).map(([area, chips]) => ({ area, chips }));
  }

  // 헤더에 area명이 표시되므로 칩 라벨에서 area명 제거
  function chipLabelInArea(chip) {
    if (chip.type === "group") return "전체";
    if (chip.type === "collapse") return "접기";
    return chip.label;
  }

  const loadChallenge = async () => {
    isLoading.value = true;
    try {
      const { data, error } = await get(`/challenge/${challengeId}`);
      if (error || !data?.success) {
        challenge.value = null;
        return;
      }
      challenge.value = data.data;

      // 페이지 진입 시 활성 탭 = 현재 라운드 (모두 마감이면 마지막 라운드)
      const rounds = challenge.value?.rounds || [];
      if (rounds.length) {
        const idx = rounds.findIndex((r) => !r.closed_at);
        activeRoundIdx.value = idx === -1 ? rounds.length - 1 : idx;
      }
    } catch (e) {
      console.error("[ChallengeDetail] 로드 실패:", e);
      challenge.value = null;
    } finally {
      isLoading.value = false;
    }
  };

  // 라운드 마감 — 확인 모달 → API
  const confirmCloseRound = (round) => {
    closingRound.value = round;
    showCloseRoundModal.value = true;
  };

  const handleCloseRound = async () => {
    showCloseRoundModal.value = false;
    const round = closingRound.value;
    closingRound.value = null;
    if (!round) return;

    errorMessage.value = "";
    try {
      const { data, error } = await post(`/challenge/round/${round.id}/close`, {});
      if (error || !data?.success) {
        errorMessage.value = error?.message || data?.message || "마감에 실패했습니다.";
        return;
      }
      successMessage.value = data.message || "라운드가 마감되었습니다.";
      await loadChallenge();
    } catch (e) {
      console.error("[ChallengeDetail] 마감 실패:", e);
      errorMessage.value = "서버 오류가 발생했습니다.";
    }
  };

  const confirmDelete = () => {
    showDeleteModal.value = true;
  };

  const handleDelete = async () => {
    showDeleteModal.value = false;
    errorMessage.value = "";
    try {
      const { data, error } = await del(`/challenge/${challengeId}`);
      if (error || !data?.success) {
        errorMessage.value = error?.message || data?.message || "삭제에 실패했습니다.";
        return;
      }
      successMessage.value = data.message || "챌린지가 삭제되었습니다.";
      setTimeout(() => router.push("/site-manager/challenge/list"), 800);
    } catch (e) {
      console.error("[ChallengeDetail] 삭제 실패:", e);
      errorMessage.value = "서버 오류가 발생했습니다.";
    }
  };

  const goToList = () => router.push("/site-manager/challenge/list");
  const goToEdit = () => router.push(`/site-manager/challenge/edit/${challengeId}`);

  onMounted(() => {
    loadPlacesAll();
    loadChallenge();
  });
</script>